<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏房间管理面板</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); overflow: hidden; }
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; }
        .header h1 { font-size: 2.2em; margin-bottom: 8px; font-weight: 500; }
        .header p { font-size: 1em; opacity: 0.9; }

        .stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 24px; background: #f8f9fa; }
        .stat-card { background: #fff; padding: 20px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
        .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
        .stat-number { font-size: 2.4em; font-weight: 700; color: #667eea; margin-bottom: 6px; }
        .stat-label { font-size: 0.95em; color: #666; font-weight: 600; }

        .controls { padding: 16px 24px; background: #fff; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
        .refresh-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: 0; padding: 10px 18px; border-radius: 24px; cursor: pointer; font-size: 0.95em; font-weight: 600; transition: transform .2s ease, opacity .2s ease; }
        .refresh-btn:hover { transform: scale(1.04); opacity: .95; }
        .auto-refresh { display: flex; align-items: center; gap: 8px; color: #444; }

        .rooms-container { padding: 24px; }
        .rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
        .room-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
        .room-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
        .room-header { padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; display: flex; justify-content: space-between; align-items: center; }
        .room-id { font-size: 1.15em; font-weight: 700; }
        .room-status { padding: 4px 12px; border-radius: 999px; font-size: 0.85em; font-weight: 700; }
        .status-available { background: rgba(40, 167, 69, 0.2); color: #28a745; }
        .status-full { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
        .room-body { padding: 16px; }
        .room-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
        .player-count { font-size: 1.1em; font-weight: 700; color: #333; }
        .capacity { color: #666; font-size: 0.85em; }
        .players-section h4 { color: #333; margin-bottom: 8px; font-size: 0.95em; }
        .players-list { display: flex; flex-wrap: wrap; gap: 6px; }
        .player-tag { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 600; }
        .no-players { color: #999; font-style: italic; font-size: 0.9em; }
        .loading, .error, .empty-state { text-align: center; padding: 40px; color: #666; }
        .error { color: #dc3545; }

        @media (max-width: 768px) {
            .container { margin: 10px; border-radius: 16px; }
            .header { padding: 22px; }
            .rooms-grid { grid-template-columns: 1fr; }
            .stats-container { grid-template-columns: 1fr; padding: 20px; }
            .controls { flex-direction: column; align-items: stretch; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎮 游戏房间管理面板</h1>
            <p>实时监控房间状态和玩家信息</p>
        </div>

        <div class="stats-container">
            <div class="stat-card"><div class="stat-number" id="totalRooms">0</div><div class="stat-label">总房间数</div></div>
            <div class="stat-card"><div class="stat-number" id="totalPlayers">0</div><div class="stat-label">总玩家数</div></div>
            <div class="stat-card"><div class="stat-number" id="activeRooms">0</div><div class="stat-label">活跃房间</div></div>
        </div>

        <div class="controls">
            <button class="refresh-btn" onclick="loadRoomData()">🔄 刷新数据</button>
            <div class="auto-refresh">
                <input type="checkbox" id="autoRefresh" onchange="toggleAutoRefresh()">
                <label for="autoRefresh">自动刷新 (每10秒)</label>
            </div>
        </div>

        <div class="rooms-container">
            <div id="roomsGrid" class="rooms-grid">
                <div class="loading">正在加载房间数据...</div>
            </div>
        </div>
    </div>

    <script>
        let autoRefreshInterval = null;

        window.onload = function() { loadRoomData(); };

        async function loadRoomData() {
            try {
                const response = await fetch('/api/game/rooms', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                const result = await response.json();
                if (result.code === 200) {
                    const rooms = result.data.rooms || [];
                    const filteredRooms = rooms.filter(r => ((r.roomInfo && r.roomInfo.roomId) ? String(r.roomInfo.roomId).toLowerCase() : '') !== 'counter');
                    updateStats(filteredRooms);
                    updateRoomsDisplay(filteredRooms);
                } else {
                    showError('获取房间数据失败: ' + (result.msg || ''));
                }
            } catch (e) {
                showError('网络错误，请检查连接');
            }
        }

        function updateStats(rooms) {
            const totalRooms = rooms.length;
            const totalPlayers = rooms.reduce((sum, r) => sum + (r.roomInfo?.currentPlayers || 0), 0);
            const activeRooms = rooms.filter(r => (r.roomInfo?.currentPlayers || 0) > 0).length;
            const avg = totalRooms > 0 ? (totalPlayers / totalRooms).toFixed(1) : 0;
            document.getElementById('totalRooms').textContent = totalRooms;
            document.getElementById('totalPlayers').textContent = totalPlayers;
            document.getElementById('activeRooms').textContent = activeRooms;
        }

        function updateRoomsDisplay(rooms) {
            const roomsGrid = document.getElementById('roomsGrid');
            if (!rooms || rooms.length === 0) {
                roomsGrid.innerHTML = '<div class="empty-state"><h3>暂无房间</h3><p>当前没有创建任何游戏房间</p></div>';
                return;
            }
            const html = rooms.map(room => createRoomCard(room)).join('');
            roomsGrid.innerHTML = html;
        }

        function createRoomCard(room) {
            const info = room.roomInfo || { roomId: '-', currentPlayers: 0, maxPlayers: 0, mbtiSquare: null };
            const players = room.players || [];
            const isFull = info.currentPlayers >= info.maxPlayers && info.maxPlayers > 0;
            const statusClass = isFull ? 'status-full' : 'status-available';
            const statusText = isFull ? '已满' : '可加入';
            
            // 提取MBTI广场信息
            const mbtiSquare = info.mbtiSquare || (info.roomId ? info.roomId.split('_')[0] : '未知');
            const playersHtml = players.length > 0
                ? players.map(p => `<span class="player-tag">${p.username}${p.mbtiType ? ` (${p.mbtiType})` : ''}</span>`).join('')
                : '<span class="no-players">暂无玩家</span>';
            
            return `
                <div class="room-card">
                    <div class="room-header">
                        <div class="room-id">${info.roomId}</div>
                        <div class="room-status ${statusClass}">${statusText}</div>
                    </div>
                    <div class="room-body">
                        <div class="room-info">
                            <div class="player-count">${info.currentPlayers} / ${info.maxPlayers}</div>
                            <div class="capacity">MBTI: ${mbtiSquare}广场</div>
                        </div>
                        <div class="players-section">
                            <h4>房间玩家</h4>
                            <div class="players-list">${playersHtml}</div>
                        </div>
                    </div>
                </div>
            `;
        }

        function showError(message) {
            document.getElementById('roomsGrid').innerHTML = `
                <div class="error"><h3>❌ 错误</h3><p>${message}</p></div>
            `;
        }

        function toggleAutoRefresh() {
            const on = document.getElementById('autoRefresh').checked;
            if (on) startAutoRefresh(); else stopAutoRefresh();
        }
        function startAutoRefresh() {
            if (autoRefreshInterval) clearInterval(autoRefreshInterval);
            autoRefreshInterval = setInterval(loadRoomData, 10000);
        }
        function stopAutoRefresh() {
            if (autoRefreshInterval) { clearInterval(autoRefreshInterval); autoRefreshInterval = null; }
        }
        window.onbeforeunload = function() { stopAutoRefresh(); };
    </script>
</body>
</html>


